import React, { Component, createRef } from 'react'
// 引入子组件
import Son from './Son';

type Props = {}

type State = {
    count: number,
    user: {
        username: string,
        age: number
    }
}

export default class Father extends Component<Props, State> {
    // Props 定义的是接收的父组件传递的属性的类型
    // State 当前组件自身的数据的类型
    state = {
        count: 0,
        user: {
            username: '张三',
            age: 10
        }
    }
    ref1 = createRef<HTMLInputElement>();

    addAgeFn = () => {
        this.setState({
            user: {
                ...this.state.user,
                age: this.state.user.age + 1
            }
        })
    }

    render() {
        return (
            <div>
                {/* <p onClick={() => {
                    this.setState({
                        count: 100
                    })
                }}>count:{this.state.count}</p> */}

                {/* 受控组件写法 */}
                {/* <input type='text' value={this.state.user.username} onChange={(e) => {
                    this.setState({
                        user: {
                            ...this.state.user,
                            username: e.target.value
                        }
                    })
                }} /> */}
                {/* 非受控组件 */}
                {/* <input type='text' ref={this.ref1} defaultValue={this.state.user.username} />
                <button onClick={() => {
                    方式1: 当类型this.ref1.current 可能为null提示
                    console.log(this.ref1.current?.value);
                    方式2:
                    console.log((this.ref1.current as HTMLInputElement).value)
                    console.log(this.ref1.current!.value);
                }}>提交表单</button> */}

                {/* 使用子组件 */}
                <Son user={this.state.user} addAgeFn={this.addAgeFn}></Son>
            </div>
        )
    }
}